<template>
  <div class="title2">
    <div @click="toBackParent" class="backDiv">
      <img class="backImg" src="../../assets/images/back.svg">
      <div style="padding-top: 2px;">{{  $t('text.System.l25')  }}</div>
    </div>
    <div style="flex: 1;">{{  $t('text.System.l169')  }}</div>
    <div style="flex: 1;"></div>
  </div>
  <div class="ss6" v-if="selectList.length > 0 && flag">


    <div class="ss5">{{  $t('text.System.l170')  }}</div>
    <div class="ss12">
      <div class="ss11" v-for="(item,index) in addPerm" :key="index">
        <div class="ss8">{{item.name}}</div>
        <div class="ss10">
          <el-switch v-model="item.value" :loading="item.loading" @change="beforeChange(item)" :style="switchStyle"/>
        </div>
      </div>
    </div>


    <div class="ss5">{{  $t('text.System.l171')  }}</div>
    <div class="ss12">
      <div class="ss11" v-for="(item,index) in editPerm" :key="index">
        <div class="ss8">{{item.name}}</div>
        <div class="ss10">
          <el-switch v-model="item.value" :loading="item.loading" @change="beforeChange(item)" :style="switchStyle"/>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import {ElMessage} from 'element-plus'
import {findListByJobIdAndType, findListByTypeCode, updatePerm} from '../../http/api'
import {addPerm, editPerm} from "@/views/systemSetting/data/PostNextItem4";
import {translate as $t} from "@/language";

export default {
  name: "PostNextItem1",
  emits: ['returnData'],
  components: {},
  props: {
    title: String,
    jobId: String
  },
  data() {
    return {
      selectStyle: {border: 'none', justifyContent: 'flex-end', width: '120px'},
      switchStyle: {height: '15px'},
      value1: true,
      flag: false,
      loading1: false,
      selectList: [],
      type: 3,
      permData: {
        id: '',
        jobId: '',
        type: '',
        value: 1
      },
      addPerm,
      editPerm
    }
  },
  created() {
    findListByTypeCode('permLevel').then(res => {
      if (res !== undefined) {
        this.selectList = res
        console.log(res)
      }
    }).catch()

    this.findListByJobIdAndType()
  },
  mounted() {

  },
  methods: {
    $t,
    findListByJobIdAndType() {
      findListByJobIdAndType(this.jobId, this.type).then(res => {

        // console.log('res', res)

        for (let item in res) {
          //新增权限:
          for (let one of this.addPerm) {
            // console.log('one: ', one)
            if (one.tag === item) {
              // console.log('res[item]',res[item])
              one.id = res[item].id
              one.jobId = res[item].jobId
              one.type = res[item].type
              // one.value = res[item].value
              one.value = one.elementType===2 ? (parseInt(res[item].value) === 1 ? true : false) : res[item].value
            }
          }
          //编辑权限:
          for (let one of this.editPerm) {
            // console.log('one: ', one)
            if (one.tag === item) {
              // console.log('res[item]',res[item])
              one.id = res[item].id
              one.jobId = res[item].jobId
              one.type = res[item].type
              // one.value = res[item].value
              one.value = one.elementType===2 ? (parseInt(res[item].value) === 1 ? true : false) : res[item].value
            }
          }
        }

        this.flag = true
      })
    },
    setData(data) {
      this.permData.value = data.level
      // console.log('setData.this.permData', this.permData)
      this.updatePerm();
    },
    beforeChange(item) {
      // console.log("item", item)

      this.permData.id = item.id
      this.permData.jobId = item.jobId
      this.permData.type = item.type
      this.permData.value = item.value ? 1 : 0

      item.loading = true
      this.updatePerm()
      return new Promise((resolve) => {
        setTimeout(() => {
          item.loading = false
          // ElMessage.success('Switch success')
          return resolve(true)
        }, 500)
      })
    },
    updatePerm(){
      console.log('beforeChange.this.permData',this.permData)
      updatePerm(this.permData).then(res => {
        if (res===null || res=='') {
          ElMessage.success(this.$t('text.System.l37'))
        }
      })
    },
    toBackParent() {
      return this.$emit('returnData', true)
    }

  },
  watch: {},
  computed: {}

}
</script>
<style scoped>
.backDiv {
  display: flex;
  flex: 1 1 0%;
  color: #6698ff;
  font-size: 13px;
  align-items: center;
  padding-left: 20px;
}

.backImg {
  width: 23px;
  height: 23px;
  padding-right: 5px;
}

.ss12 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  margin-bottom: 15px;
}

.ss11 {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: none;
}

input {
  border: none;
  outline: none;
  text-align: end;
}

textarea {
  width: 100%;
  border: none;
  outline: none;
}


.title {
  background: #f2f2f2;
  color: gray;
  height: 40px;
  line-height: 40px;
}

.title2 {
  background: #f2f2f2;
  color: gray;
  height: 40px;
  line-height: 40px;
  display: flex;
}

.rightMain {
  width: 100%;
  margin: 10px 15px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.ss7 {
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  margin-bottom: 15px;
}

.ss6 {
  display: flex;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  flex-direction: column;
  min-width: 300px;
  padding: 30px 100px;
  overflow: auto;
  height: 100%;
}

.ss5 {
  text-align: left;
  color: #444;
  padding: 7px 0px;
  font-size: 13px;
}
</style>
  